<template>
<div>
<header class="admin-container-header">
    <div class="float-left">
        <h4>友情链接</h4>
    </div>
   <button type="button" class="pull-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='dialogLinkAdd'>
        <span><Icon type="plus-round"></Icon> 添加</span>
    </button>
</header>

<main class="admin-container-body" style="height: calc(100% - 50px)">
    <section class="panel-box">
        <div class="panel-box-body">
                <section class="diy-table-list" v-if='itemList.length > 0'>
                    <div class="diy-table-item diy-table-item-header">
                        <div class="list-unstyled row">
                            <div class="col-md-2">顺序</div>
                            <div class="col-md-2">链接类型</div>
                            <div class="col-md-2">网站名称</div>
                            <div class="col-md-3">网址</div>
                            <div class="col-md-1">排序</div>
                            <div class="col-md-2"></div>
                        </div>
                    </div>
                <draggable :list="itemList">
                    <div class="diy-table-item" v-for='(item,index) in itemList' >
                            <div class="list-unstyled row">
                                <div class="col-md-2 text-999">{{index+1}}</div>
                                <div class="col-md-2 text-999"><span v-if='item.type == "all"'>整站</span><span v-if='item.type == "index"'>首页</span><span v-if='item.type == "notIndex"'>非首页</span></div>
                                <div class="col-md-2">{{item.name}}</div>
                                <div class="col-md-3 text-overflow">{{item.url}} </div>
                                <li class="col-md-1">
                                    <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveUp(item)' :disabled='index==0'><Icon type="md-arrow-up" /></i-Button>
                                    <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveDown(item)' :disabled='itemList.length==index+1'><Icon type="md-arrow-down" /></i-Button>
                                </li>
                                <div class="col-md-2 text-right p-r-md">
                                    <i-button type="error" size="small" @click='linkDel(item)'>删除</i-button>
                                    <i-button type="primary" size="small" @click='dialogLinkEdit(item)'>修改</i-button>
                                </div>
                          </div>
                    </div>
                </draggable>
                </section>
                <div class="no-block" v-else>
                    <Icon type="ios-filing-outline"></Icon>
                    <p>暂无数据</p>
                </div>
                    
            </div>
    </section>
</main>
    
    
    <Modal :title="dialogLinkTitle" v-model="dialogLink" size="small">
            <i-form :model="linkInfo" :rules="linkInfoRules" ref="linkInfo" :label-width="80">
                <Form-Item label="名称" prop="name">
                    <i-input v-model="linkInfo.name" placeholder="例:百度"></i-input>
                </Form-Item>
                <Form-Item label="网址" prop="url">
                    <i-input placeholder="例:https://www.baidu.com" v-model="linkInfo.url"></i-input>
                </Form-Item>
                <Form-Item label="描述">
                  <i-input v-model="linkInfo.description" placeholder="例:百度中文搜索引擎"></i-input>
                </Form-Item>
                <Form-Item label="类型">
                    <i-select v-model="linkInfo.type" placeholder="请选择">
                      <i-option v-for='item in typeList' :label="item.name" :value="item.value"></i-option>
                    </i-select>
                </Form-Item>
            </i-form>
            <div slot="footer" class="dialog-footer">
                <i-button @click="dialogLink = false">取 消</i-button>
                <i-button type="primary" @click="linkAdd('linkInfo')">确 定</i-button>
            </div>
        </Modal>
</div>

</div>
</template>
<script>
export default {
    data () {
        return {

            itemList: [],
            linkInfo:{
                name: '',
                name: '',
                url: '',
                type: 'all',
                description: '',
            },
            typeList: [{name:'整站',value: 'all'},{name:'首页',value: 'index'},{name:'非首页',value: 'notIndex'}],
            dialogLinkTitle: '添加友情链接',
            dialogLink: false,
            linkStatus: 'add',
            linkInfoRules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '请输入网址', trigger: 'blur' }
                ],
            },
        
        }
    },
    mounted: function() {
        this.getItemList();
    },
    methods:{
        moveUp(item,subItem) {
            var itemList = this.itemList;
            for (var i = 0; i < itemList.length; i++) {
                   itemList[i].sort = i;
            }
            for(var i = 0; i < itemList.length; i++) {
                if (item.id == itemList[i].id) {
                    itemList[i-1].sort = i;
                    itemList[i].sort = i - 1;
                }
            }
            this.itemList = itemList;
            this.itemSortSave();
        },
        moveDown(item,subItem) {
            var itemList = this.itemList;
            for (var i = 0; i < itemList.length; i++) {
                   itemList[i].sort = i;
            }
            for(var i = 0; i < itemList.length; i++) {
                if (item.id == itemList[i].id) {
                    itemList[i+1].sort = i;
                    itemList[i].sort = i + 1;
                }
            }
            this.itemList = itemList;
            this.itemSortSave();
        },
        itemSortSave() {
            this.$ssy.ajax('{$domain}/widget/ApiAdminWidgetFriendLink/itemSortSave', {
                itemList: this.itemList,
            }).then(res => {
                if(res.code == 1) {
                    this.getItemList();
                    this.$Message.success('操作成功');
                }
            });
        },
        dialogLinkAdd: function() {
            this.dialogLinkTitle = '添加友情链接';
            this.dialogLink = true;
            this.linkInfo.name = '';
            this.linkInfo.url = '';
            this.linkInfo.description = '';
            this.linkInfo.type = 'all';
            this.linkStatus = 'add';
        },
        linkAdd: function(val) {
           this.$refs[val].validate((valid) => {
                if (valid) {
                    if (this.linkStatus == 'add') {
                        this.$ssy.ajax('{$domain}/widget/ApiAdminWidgetFriendLink/itemAdd',{
                            name: this.linkInfo.name,
                            url: this.linkInfo.url,
                            description: this.linkInfo.description,
                            type: this.linkInfo.type,
                        }).then(res => {
                            if (res.code == 1) {
                                this.$Message.success(res.msg);
                                this.getItemList();
                                this.dialogLink = false;
                            }
                        });
                    } else {
                        this.$ssy.ajax('{$domain}/widget/ApiAdminWidgetFriendLink/itemEdit',{
                            id: this.linkInfo.id,
                            name: this.linkInfo.name,
                            url: this.linkInfo.url,
                            description: this.linkInfo.description,
                            type: this.linkInfo.type,
                        }).then(res => {
                            if (res.code == 1) {
                                this.$Message.success(res.msg);
                                this.getItemList();
                                this.dialogLink = false;
                            }
                        });
                    }

                }
            });
        },
        linkDel: function(val) {
           this.$Modal.confirm({
                title: '消息提示',
                content: '<p>确定删除么？删除后不可恢复</p>',
                onOk: () => {
                    this.$ssy.ajax('{$domain}/widget/ApiAdminWidgetFriendLink/itemDel',{
                        id: val.id,
                    }).then(res => {
                        if (res.code == 1) {
                            this.$Message.success(res.msg);
                            this.getItemList();
                        }
                    });
                },
                onCancel: () => {
                }
            });
        },
        dialogLinkEdit: function(val) {
            this.dialogLinkTitle = '编辑友情链接';
            this.dialogLink = true;
            this.linkInfo.id = val.id;
            this.linkInfo.name = val.name;
            this.linkInfo.url = val.url;
            this.linkInfo.description = val.description;
            this.linkInfo.type = val.type;
            this.linkStatus = 'edit';
        },
        getItemList: function() {
            this.$ssy.ajax('{$domain}/widget/ApiAdminWidgetFriendLink/itemList',{
                order: 'asc',
            }).then(res => {
                if (res.code == 1) {
                    var itemList = res.data.friendlinkList;
                    this.itemList = itemList;
                }
            });
        },
        linkSave: function() {
            var itemList = this.itemList;
            for (var i = 0; i < itemList.length; i++) {
                itemList[i].sort = i;
            }
            this.$ssy.ajax('{$domain}/widget/ApiAdminWidgetFriendLink/itemSave',{
                linkList: itemList,
            }).then(res => {
                if (res.code == 1) {
                    this.$Message.success(res.msg);
                    this.getItemList();
                }
            });
        },
        
    },
}
</script>
{/block}